<template>
  <div class="container" v-if="dishDetail" v-loading="loading">
    <div class="top clearfix">
      <div class="image leftfix">
        <img :src="require('@/pages/Home/images/'+dishDetail.dishUrl)" alt="" style="width: 100%; height: 100%;">
      </div>
      <div class="information leftfix">
        <div class="name">
          {{ dishDetail.dishName }}
        </div>
            <el-card class="box-card-description">
              <div slot="header" class="clearfix">
                <span>菜品描述</span>
              </div>
              <div v-for="o in 1" :key="o" class="text item">
                {{ dishDetail.description }}
              </div>
            </el-card>
          </div>
        </div>
        <div class="dish-make ">菜品做法</div>
        <el-card class="box-card-make">
          <div slot="header" class="clearfix">
            <span>菜品做法</span>
          </div>
          <pre  style="white-space: pre-line" v-for="o in 1" :key="o" class="text item">
            {{ dishDetail.makes }}
          </pre>
        </el-card>
        <div class="bottom">
          <div class="title">
            营养成分
          </div>
          <div ref="chart" style="height: 300px; width: 100%"></div>
        </div>
        <div class="add">
          <el-button type="success" round style="width: 200px;height: 50px;" @click="addDish">添加菜品</el-button>
        </div>
  </div>
</template>

<script>
import store from "@/store";
import request from "@/utils/request";
import * as echarts from 'echarts';
export default {
  data() {
    return {
      chart: "",
      dishDetail: "",
      loading : true
    }
  },
  mounted() {
    request.get('dish/findDishById/' + this.$route.params.id)
        .then(res => {
          if (res.data.code == 1) {
            this.dishDetail = res.data.data
            this.dishDetail.makes = this.dishDetail.makes.replace(/(\d+\.)/g, '\n$1');
            this.$nextTick(() => {
              this.init()
            });
            this.loading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    //
  },
  methods: {
    init() {
      //2.初始化
      this.chart = echarts.init(this.$refs.chart);
      //3.配置数据
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '1%',
          left: 'center'
        },
        series: [
          {
            name: '营养成分',
            type: 'pie',
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: this.dishDetail.carbohydrates, name: '碳水化合物'},
              {value: this.dishDetail.fat, name: '脂肪'},
              {value: this.dishDetail.protein, name: '蛋白质'},
              {value: this.dishDetail.vitamin, name: '维生素'},
            ],
          }
        ],

      };
      //  4.传入数据
      this.chart.setOption(option);
    },
    addDish() {
      request.post("menu/addMenu", {
            dishId: this.dishDetail.id,
            dishUrl: this.dishDetail.dishUrl,
            dishName: this.dishDetail.dishName,
            dishType: this.dishDetail.dishType,
            fat: this.dishDetail.fat,
            heat: this.dishDetail.heat,
            protein: this.dishDetail.protein,
            carbohydrates: this.dishDetail.carbohydrates,
            description: this.dishDetail.description,
            dishUser: store.state.app.username
          }
      ).then((res) => {
        alert("添加成功，请前往菜单查看")
      }).catch(error => {
        alert('菜品已在菜单中')
      })
    }
  },
};
</script>

<style scoped>
.container {
  width: 1160px;
  margin: 0 auto;
}

.top {
  margin-top: 30px;
}

.image {
  width: 450px;
  height: 350px;
  background-color: green;
}

.leftfix {
  float: left;
}

.rightfix {
  float: right;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.information .name {
  font-weight: 900;
  margin-left: 98px;
  width: 492px;
  text-align: center;
  font-size: 40px;
  color: rgb(128, 0, 0);
}

.bottom {
  margin-top: 59px;
}

.title {
  width: 232px;
  height: 88px;
  font-size: 37px;
  font-weight: 900;
  color: rgb(128, 0, 0);
}

.ingredients {
  width: 232px;
  height: 63px;
  background-color: green;
  margin-left: 464px;
  margin-top: 79px;
}

.ingredient {
  width: 696px;
  height: 93px;
  background-color: green;
  margin-left: 232px;
  margin-top: 65px;
}

.makes {
  width: 232px;
  height: 63px;
  background-color: green;
  margin-left: 464px;
  margin-top: 79px;
}

.make {
  width: 1160px;
  height: 53px;
  background-color: green;
  margin-top: 65px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card-description {
  width: 512px;
  margin-left: 94px;
  margin-top: 12px;
}

.box-card-make {
  width: 722px;
  margin-left: 180px;
  margin-top: 12px;
}

.nourishment {
  margin-left: 305px;
}

.dish-make {
  margin-top: 50px;
  width: 232px;
  height: 88px;
  font-size: 37px;
  font-weight: 900;
  color: rgb(128, 0, 0);
}

.add {
  margin-top: 65px;
  margin-left: 870px;
}
</style>
